import Description from '@/components/Description';
import { realTimeMonitoringControllerDeviceBasicInfo as getInfo } from '@/services/ess/realTimeMonitoring';
import { useIntl } from '@umijs/max';
import React, { useEffect, useState } from 'react';
import { useSelectedDeviceNode } from '../SelectedDeviceNodeContext';
import { formatPower } from '../utils';

export const CabinetBasicInfo: React.FC = () => {
  const node = useSelectedDeviceNode();
  const intl = useIntl();
  const [items, setItems] = useState<
    Array<{
      key: keyof API.DeviceManagerDTO;
      label: string;
      children: React.ReactNode;
      span?: number;
    }>
  >([
    {
      key: 'deviceName',
      label: intl.formatMessage({ id: 'baseInfo.deviceName' }), // 设备名称
      children: '',
    },
    {
      key: 'deviceModel',
      label: intl.formatMessage({ id: 'baseInfo.deviceModel' }), // 设备型号
      children: '',
    },
    {
      key: 'manufacturer',
      label: intl.formatMessage({ id: 'baseInfo.manufacturer' }), // 厂家
      children: '',
    },
    {
      key: 'ratedPower',
      label: intl.formatMessage({ id: 'baseInfo.ratedPower' }), // 额定功率
      children: '',
    },
    {
      key: 'ratedCapacity',
      label: intl.formatMessage({ id: 'baseInfo.ratedCapacity' }), // 额定容量
      children: '',
    },
    {
      key: 'type',
      label: intl.formatMessage({ id: 'baseInfo.type' }), // 类型
      children: '',
    },
    {
      key: 'bmsNum',
      label: intl.formatMessage({ id: 'baseInfo.bmsCount' }), // 堆数
      children: '',
    },
    {
      key: 'clusterPerBms',
      label: intl.formatMessage({ id: 'baseInfo.clusterPerBms' }), // 每堆内簇数
      children: '',
    },
    {
      key: 'bmuPerBms',
      label: intl.formatMessage({ id: 'baseInfo.bmuPerBms' }), // 每堆内模组数
      children: '',
    },
    {
      key: 'cellPerBmu',
      label: intl.formatMessage({ id: 'baseInfo.cellPerBmu' }), // 	每模组内电芯数
      children: '',
    },
    {
      key: 'pictureDir',
      label: intl.formatMessage({ id: 'baseInfo.pictureDir' }), // 	设备图片
      children: '',
    },
  ]);

  const removeNullParams = (params: Record<string, any>) => {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    return Object.fromEntries(Object.entries(params).filter(([_, v]) => v !== null));
  };

  const convertType = (type: number) => {
    switch (type) {
      case 1:
        return intl.formatMessage({ id: 'baseInfo.air' });
      case 2:
        return intl.formatMessage({ id: 'baseInfo.liquid' });
      default:
        return '--';
    }
  };

  useEffect(() => {
    if (node) {
      const params = removeNullParams({
        areaId: node?.areaId ? String(node.areaId) : null,
        deviceType: node.deviceType,
        deviceCode: node.deviceCode,
      });
      // 调用后端接口获取数据
      getInfo(params).then((response) => {
        if (response.success && response.data) {
          const data: API.DeviceManagerDTO = response.data;

          // 格式化额定功率和额定容量
          const formattedRatedPower = formatPower(data.ratedPower, true);
          const formattedRatedCapacity = formatPower(data.ratedCapacity, false);

          // 更新items状态
          setItems((prevItems) =>
            prevItems.map((item) => {
              if (item.key === 'ratedPower') {
                return {
                  ...item,
                  children: `${formattedRatedPower.value} ${formattedRatedPower.unit}`,
                };
              } else if (item.key === 'pictureDir' && data[item.key]) {
                console.log('pictureDir', data[item.key]);
                return {
                  ...item,
                  children: (
                    <img src={data[item.key]} alt="设备图片" style={{ maxWidth: '100%' }} />
                  ),
                };
              } else if (item.key === 'ratedCapacity') {
                return {
                  ...item,
                  children: `${formattedRatedCapacity.value} ${formattedRatedCapacity.unit}`,
                };
              } else if (item.key === 'type') {
                return {
                  ...item,
                  // @ts-ignore
                  children: convertType(data[item.key]),
                };
              } else {
                return {
                  ...item,
                  children: data[item.key] !== undefined ? data[item.key] : item.children,
                };
              }
            }),
          );
        }
      });
    }
  }, [node]);

  return (
    <Description
      items={items}
      column={3}
      labelStyle={{ width: '150px' }}
      style={{ padding: '40px 80px 0 0' }}
    />
  );
};
